<!--
文件名称: personal_center.html
完整存储路径: frontend/templates/personal_center.html
功能说明:
    个人中心页面，用户查看和编辑个人信息、修改密码等功能
使用说明:
    通过浏览器访问 "/personal-center" 获取个人中心页面
-->

{% extends "layouts/base.html" %}
{% block title %}个人中心 - 近视预防干预系统{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h2 class="mb-0">
                    <i class="bi bi-person-circle"></i> 个人中心
                </h2>
            </div>
            
            <div class="row">
                <div class="col-lg-10 col-xl-8 mx-auto">
                    <!-- 个人信息卡片 -->
                    <div class="card shadow-sm mb-4">
                        <div class="card-body p-4">
                            <div class="row align-items-center mb-4">
                                <div class="col-auto">
                                    <img src="{{ url_for('static', filename='images/avatar.png') }}" 
                                         alt="用户头像" class="rounded-circle border" 
                                         style="width: 80px; height: 80px; object-fit: cover;" id="userAvatar">
                                </div>
                                <div class="col">
                                    <h4 class="mb-1" id="username">加载中...</h4>
                                    <p class="text-muted mb-0" id="position">加载中...</p>
                                </div>
                                <div class="col-auto">
                                    <button class="btn btn-outline-primary btn-sm" id="editProfileBtn">
                                        <i class="bi bi-pencil"></i> 编辑信息
                                    </button>
                                </div>
                            </div>
                            
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <div class="info-item">
                                        <label class="info-label">真实姓名</label>
                                        <div class="info-value" id="realName">加载中...</div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="info-item">
                                        <label class="info-label">性别</label>
                                        <div class="info-value" id="gender">加载中...</div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="info-item">
                                        <label class="info-label">手机号</label>
                                        <div class="info-value" id="mobile">加载中...</div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="info-item">
                                        <label class="info-label">邮箱</label>
                                        <div class="info-value" id="email">加载中...</div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="info-item">
                                        <label class="info-label">部门</label>
                                        <div class="info-value" id="department">加载中...</div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="info-item">
                                        <label class="info-label">备注</label>
                                        <div class="info-value" id="remark">加载中...</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 修改密码卡片 -->
                    <div class="card shadow-sm">
                        <div class="card-body p-4">
                            <div class="d-flex align-items-center mb-4">
                                <h5 class="card-title mb-0">
                                    <i class="bi bi-shield-lock text-warning"></i> 修改密码
                                </h5>
                            </div>
                            
                            <form id="changePasswordForm" class="row g-3">
                                <div class="col-md-4">
                                    <label for="currentPassword" class="form-label">当前密码</label>
                                    <input type="password" class="form-control" id="currentPassword" required>
                                </div>
                                <div class="col-md-4">
                                    <label for="newPassword" class="form-label">新密码</label>
                                    <input type="password" class="form-control" id="newPassword" required>
                                </div>
                                <div class="col-md-4">
                                    <label for="confirmPassword" class="form-label">确认新密码</label>
                                    <input type="password" class="form-control" id="confirmPassword" required>
                                </div>
                                <div class="col-12">
                                    <button type="submit" class="btn btn-warning">
                                        <i class="bi bi-key"></i> 修改密码
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 编辑个人信息模态框 -->
<div class="modal fade" id="editProfileModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">编辑个人信息</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="editProfileForm">
                    <div class="mb-3">
                        <label for="editRealName" class="form-label">真实姓名</label>
                        <input type="text" class="form-control" id="editRealName" required>
                    </div>
                    <div class="mb-3">
                        <label for="editMobile" class="form-label">手机号</label>
                        <input type="tel" class="form-control" id="editMobile" required>
                    </div>
                    <div class="mb-3">
                        <label for="editEmail" class="form-label">邮箱</label>
                        <input type="email" class="form-control" id="editEmail" required>
                    </div>
                    <div class="mb-3">
                        <label for="editGender" class="form-label">性别</label>
                        <select class="form-select" id="editGender" required>
                            <option value="男">男</option>
                            <option value="女">女</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="editDepartment" class="form-label">部门</label>
                        <input type="text" class="form-control" id="editDepartment">
                    </div>
                    <div class="mb-3">
                        <label for="editPosition" class="form-label">职位</label>
                        <input type="text" class="form-control" id="editPosition">
                    </div>
                    <div class="mb-3">
                        <label for="editRemark" class="form-label">备注</label>
                        <textarea class="form-control" id="editRemark" rows="3"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="saveProfileBtn">保存</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block styles %}
{{ super() }}
<style>
    .info-item {
        padding: 12px 16px;
        background: #f8f9fa;
        border-radius: 8px;
        border-left: 4px solid #007bff;
    }
    
    .info-label {
        font-size: 12px;
        font-weight: 600;
        color: #6c757d;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 4px;
    }
    
    .info-value {
        font-size: 14px;
        font-weight: 500;
        color: #212529;
        margin: 0;
    }
    
    .card {
        border: none;
        border-radius: 12px;
        box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    }
    
    .card-body {
        padding: 1.5rem;
    }
    
    .btn-outline-primary {
        border-width: 1.5px;
        font-weight: 500;
    }
    
    .form-control, .form-select {
        border-radius: 8px;
        border: 1px solid #dee2e6;
    }
    
    .form-control:focus, .form-select:focus {
        border-color: #007bff;
        box-shadow: 0 0 0 0.2rem rgba(0,123,255,0.25);
    }
    
    .btn {
        border-radius: 8px;
        font-weight: 500;
        padding: 8px 16px;
    }
    
    .modal-content {
        border-radius: 12px;
        border: none;
    }
    
    .modal-header {
        border-bottom: 1px solid #e9ecef;
        padding: 1.5rem;
    }
    
    .modal-body {
        padding: 1.5rem;
    }
    
    .modal-footer {
        border-top: 1px solid #e9ecef;
        padding: 1.5rem;
    }
</style>
{% endblock %}

{% block scripts %}
{{ super() }}
<script src="{{ url_for('static', filename='js/personal_center.js') }}"></script>
{% endblock %} 